import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'
import ConfirmDialog from '../ConfirmDialog'
import './ruleStyle.less'

const mapStateToProps = (state) => {
  return {
    currentGroupRules: state.group.currentGroupRules,
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    queryCurrentGroupRulesNoRoom: () => dispatch(global.allActions.groupActions.queryCurrentGroupRulesNoRoom),
    chooseCreateGame: (msg) => dispatch(global.allActions.groupActions.chooseCreateGame(msg))
  }
}

const GameRuleBar = (props) => {
  const {rule, del, toConfig} = props
  const {name, icon, config} = rule.gameConf
  const content = JSON.parse(rule.jsonContent)
  console.warn(content)
  const turns = config[0].choice.find(ch => ch.value === content.turns)
  return <div className="game-rule-bar pure-g">
    <div className="pure-u-20-24 v-center">
      <img className="bar-game" src={icon} alt=""/>
      <div className="game-tip mlr-3">
        <div>{name}</div>
        <div className="light-grey">别名: {rule.confName}</div>
        <div className="light-grey">{turns.label}</div>
      </div>
    </div>
    <div className="pure-u-4-24 operate-area">
      <img onClick={toConfig} src="img/groupNew/rule-set.png?v=20181201" alt=""/>
      <img onClick={() => del(rule)} src="img/groupNew/rule-del.png?v=20181201" alt=""/>      
    </div>
    {/* <img src="img/groupNew/no-game.png?v=20181201" alt=""/> */}
    {/* <img className="mtr-10" src="img/groupNew/rule-manage.png?v=20181201" alt=""/>     */}
  </div>
}

class RuleList extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      showConfirm: false,
      tip: '',
      rule: undefined
    }
  }
  
  public componentDidMount() {
    this.props.queryCurrentGroupRulesNoRoom()
  }

  del(rule) {
    this.setState({showConfirm: true, tip: `确定删除玩法 ${rule.confName} ?`, rule})
  }

  config(rule) {
    console.log('rule', rule)
    let _rule = JSON.parse(rule.clientContent)
    rule.gameConf.config = _rule.config
    // console.warn('_rule', _rule.config)    
    const payConf = rule.gameConf.config.find(conf => conf.key === 'payType')
    console.log('payConf', payConf)
    payConf.choice = [{
      label: 'AA支付',
      value: 1
    }, {
      label: '群主支付',
      value: 3
    }]
    if (payConf.selected[0] === 2) {
      payConf.selected[0] = 3
    }
    this.props.chooseCreateGame({_alias: rule.confName, _id: rule.id, ...rule.gameConf})
    window.location.hash = 'ConfigModify'
  }
  
  onOk() {
    const url = `${config.pre}/crowd/conf/${Cookies.get('areaCode')}/${this.state.rule.id}/${this.props.userInfo.uid}`
    const opt = { 
      method: 'DELETE'
    }
    fetchJson(url, opt).then(data => {
      console.log(data)
      if (data.result) {
        return
      }
      this.props.queryCurrentGroupRulesNoRoom()
      this.setState({showConfirm: false})
    })
  }

  public render() {
    const {currentGroupRules, currentGroup} = this.props
    console.warn('currentGroupRules',currentGroupRules)
    const {showConfirm, tip} = this.state
    const isMineGroup = currentGroup.owner === 1
    return <div className="view-page group-view">
      <div className="rulelist-body">
        <div className="rulelist-body-wrapper">
          {
            currentGroupRules.map(rule => {
              return <GameRuleBar key={rule.id} rule={rule} del={this.del.bind(this)} toConfig={this.config.bind(this, rule)}></GameRuleBar>
            })
          }
          {
            isMineGroup ? <div className="text-center">
              <NavLink to="/ChooseGame"><img className="add-rule-bar" src="img/groupNew/rule-add.png?v=20181201" alt=""/></NavLink>
            </div> : null
          }
        </div>
      </div>
      <div className="inner-bottom">
          <div className="text vh-center"><span>游戏管理</span></div>
          <NavLink to="/Inner"><img className="back" src="img/app/back.png?v=20181201" alt="" /></NavLink>
      </div>
      {
        showConfirm ? <ConfirmDialog modalContent={tip} confirm={this.onOk.bind(this)} close={() => {this.setState({showConfirm: false})}}></ConfirmDialog> : null
      }
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(RuleList)